<script setup lang="ts">
import { getDetailProduct_c, getDeatilComments_c, getDeatilBuy_c, getDeatiltj_c } from '@/api/lidare'
import { ref, onMounted, computed, watch, onUnmounted, onActivated } from 'vue'
import type { Detailes, qualities, Comments, qses, tjes, detailesType } from '@/type/typings'
import type { ShopcartItemType, OrderItemType } from '@/type/lidare'
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
import { showToast } from 'vant';
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore();
const { collectPhoneList, lookPhoneHisList, changeDetailShopCartList, payTempPhoneData } = store;

const route = useRoute()
const router = useRouter()
// 评分
const score = ref(5);

// 带入的id
let detailId = ref()
detailId.value = route.params.id

// 详情页数据
const detailData = ref(<Detailes>({}))

// 商品收藏功能
const collectShow = ref(false)
const collectFun = ((type: boolean = !collectShow.value) => {
    console.log('收藏');
    let item = {
        ...detailData.value,
        id: detailId.value,
        selected: true,
        collectTime: Date.now()
    }
    console.log(item);

    collectPhoneList({ item, type })
    collectShow.value = !collectShow.value
})

// 加入购物车
const img = ref()
img.value = route.query.img
// 购物数量
const badge = ref(0)
const addCartFun = () => {
    console.log('加入购物车');
    if (badge.value < 1) {
        badge.value++
        let item: ShopcartItemType = {
            ...detailData.value,
            id: detailId.value,
            count: badge.value,
            salesPrice: String(detailData.value.salesPrice),
            image: img.value,
            isSelect: true
        }
        console.log(item, 'item2');

        changeDetailShopCartList(item);
        return
    }
    showToast('已经在购物车了！！')
}

watch(detailData, (data) => {
    let list = JSON.parse(localStorage.getItem("collectList") as string) || [];
    let shlist = JSON.parse(localStorage.getItem("shopcartList") as string) || [];
    let temp: Array<detailesType> = list.filter((el: detailesType) => el.id == data.id);
    let shtemp: Array<ShopcartItemType> = shlist.filter((el: ShopcartItemType) => el.id == data.id);
    if (temp.length) {
        collectShow.value = true;
    } else {
        collectShow.value = false;
    }

    if (shtemp.length) {
        badge.value = shtemp[0].count
    } else {
        badge.value = 0
    }
});

// 购物车图标去到购物车页面
const goToCartFun = (badge: number) => {
    console.log(badge, 'badge');
    router.push(`/shopcart`)

}

// 购物车立即支付功能
const payFun = () => {
    // console.log('去到支付页面');

    // // 临时存储支付数据
    // let item: OrderItemType = {
    //     ...detailData.value,
    //     image: img.value,
    //     count: 1,
    //     isSelect: true,
    //     salesPrice: String(detailData.value.salesPrice),
    //     orderCreateTime: String(Date.now()),
    //     serialNumber: String('2' + Date.now()),
    //     orderStatus: 1,
    // }
    // console.log(item, 'item');
    // payTempPhoneData(item)
    addCartFun();
    router.push('/shopcart')

}

// 四个展示隐藏或显示
const fourShow = ref(false)
const isTrue = ref(false)
const heads = ref<HTMLElement>()
const info = ref<HTMLElement>()

const tops = ref(0)

const top = ref(0)
function handleScrollx() {
    top.value = info.value!.getBoundingClientRect().top;
    if (top.value < 60) {
        heads.value!.style.backgroundColor = "#ffffff"
        isTrue.value = true;
        fourShow.value = true
    } else {
        heads.value!.style.backgroundColor = ""
        isTrue.value = false;
        fourShow.value = false
    }
}

// 问题数据
const active1 = ref(1)
const activeNames = ref(['1']);
const questionData = ref([
    {
        id: 1,
        text: '常见问题',
        icon: 'https://s1.huishoubao.com/colagoods/app/img/icon_qa_common.17a74f41.png',
        seIcon: 'https://s1.huishoubao.com/colagoods/app/img/icon_qa_common_active.ff002c9b.png',
        questions: [
            {
                qs: '二手商品来源的渠道是什么?',
                desc: '可乐优品商城所售商品均来源于合法正规渠道，从源头保证机器处于良好的使用状况，且每件商品都是经过专业质检工程师的深度检测和统一分级，严格把控商品品质。'
            },
            {
                qs: '大陆国行和其他版本有什么区别?',
                desc: '大陆国行是指在中国大陆地区上市销售的版本，包括但不限于零售机、官换机、官翻机等。其他版本是指在中国大陆之外的国家或地区上市销售的版本，包括但不限于港版、美版、日版等。版本区别不影响正常使用体验，且均享受可乐优品商城同等的售后服务。'
            },
            {
                qs: '是否拆机?',
                desc: '可乐优品商城工程师在质检过程中为确保机器的原装品质会对部分机器进行拆机检测，但不会对机器内部元器件进行拆修。'
            },
            {
                qs: '二手商品会有数据残留吗?',
                desc: '可乐优品商城所售商品在质检过程中，工程师会将原商品内的数据及使用信息彻底删除并恢复出厂设置，不会有任何数据残留，保证您有新机一般的体验。'
            },
            {
                qs: '是否支持短期降价补差价?',
                desc: '因二手商品价格波动频繁，商城暂不支持补差价。'
            },
            {
                qs: '可以开发票吗?',
                desc: '我司为合法纳税企业，商城所售商品均可开具正规发票(增值税普通发票)，如需发票请联系客服。开票须知:商城仅提供现金支付部分的发票，使用其他形式的优惠部分不在开发票范围。'
            },
            {
                qs: '关于限购及取消订单?',
                desc: '为保障多数用户的购买需求，避免“黄牛”围货，抬价转售。活动商品、秒杀商品、促销商品每个用户每个机型限购一台。如出现以下情况之一:相同 (包括但不限于雷临近、虚假) 的收货地址，同一联系电话，同一收件人姓名等，均视为同一用户。如拍多个订单，可乐优品商城有权不予发货并取消订单。如因恶意刷单、系统错误等原因产生的订单，商城有权主动取消订单并退款。'
            },
            {
                qs: '客服工作时间?',
                desc: '客服服务时间9:00-19:00，点击页面左下角“客服”按钮即可进入在线咨询，或拨打热线400-6608-971。'
            },
        ]
    },
    {
        id: 2,
        text: '订单支付',
        icon: new URL('../assets/images/home/pay.png', import.meta.url).href,
        seIcon: new URL('../assets/images/home/pay_active.png', import.meta.url).href,
        questions: [
            {
                qs: '如何联系到客服?',
                desc: '在线客服服务时间: 09:00-19:00，APP首页点击“可乐龙”头像即可进入在线咨询;热线客服服务时间: 09:00-19:00，热线电话: 400-6608-971.'
            },
            {
                qs: '如何修改收货人信息?',
                desc: '(1)发货前可联系商城客服小优提供订单编号和需要修改信息直接后台修改;(2) 发货后需联系商城客服小优提供订单编号和需要修改信息。小优联系物流修改，期间产生的转寄费用由用户承担(注:可能修改不成功，以物流实际派送为准)。'
            },
            {
                qs: '有什么支付方式?',
                desc: '用户可根据自身需求选择微信、支付宝、商城钱包三种支付方'
            },
            {
                qs: '是否支持货到付款?',
                desc: '商城暂未开通货到付款服务。'
            },
            {
                qs: '优惠劵是否可以叠加使用?',
                desc: '同一订单只能使用一张优惠券，系统会默认选择最优的优惠券方案。如购买多个商品，同时有多张优惠券，可根据需求分多个订单提交付款。'
            }
        ]
    },
    {
        id: 3,
        text: '物流问题',
        icon: new URL('../assets/images/home/wuliu.png', import.meta.url).href,
        seIcon: new URL('../assets/images/home/wuliu_active.png', import.meta.url).href,
        questions: [
            {
                qs: '什么时候发货?发什么快递?',
                desc: '当日16点前付款订单当日发出，16点后付款订单次日发出般不超过72小时。如遇节日或促销活动可能出现发货延迟。手机、平板、笔记本等贵重物品默认使用顺丰速运，如顺丰无法到达则使用EMS(中国邮政) 。配件商品使用普通快递，如中通、圆通等。'
            },
            {
                qs: '收货时应注意什么?',
                desc: '收货时请本人签收并当场拆包验货，如发现商品有破损或其他异常情况请立即联系可乐优品商城客服说明机器收货情况。'
            },
            {
                qs: '售后快递费用及运费险承保范围规则?',
                desc: '售后商品运费为谁寄谁付原则，商城不收到付件。运费险承保范围:7天无理由退换货商品经可乐优品检测判定后，质量问题产生的快递寄送费用可申请运费险出险，运费险保障标准:广东省内10元，广东省外13元，赔付方式为可乐优品商城红包。'
            },

        ]
    },
    {
        id: 4,
        text: '售后问题',
        icon: 'https://s1.huishoubao.com/colagoods/app/img/icon_qa_aftersale.b9d8655a.png',
        seIcon: 'https://s1.huishoubao.com/colagoods/app/img/icon_qa_aftersale_active.a7c46e0a.png',
        questions: [
            {
                qs: '可乐优品售后服务有哪些?',
                desc: '可乐优品商城提供7天无理由退换，15天换货保障，180天质保服务。商品到货7天内可申请无理由退换货服务;15天内如出现商品质量问题《经可乐优品检测判定》 可提供换货服务;180天内如出现商品质量问题 (经可乐优品检测判定) ，可乐优品商城将提供保修服务。全新商品收货激活或使用后，非质量问题不支持7天无理由退换。不同商品的售后服务类型及时效不同，请以所购商品的售后服务标签内容为准。'
            },
            {
                qs: '商品退货服务规则?',
                desc: '1.服务期限:商品签收后的次日起7天内可申请退货，签收时间以物流签收时间为准。申请退货后，客户应在72小时内寄出商品并回填物流单号，超出退货期限72小时未寄回将不再提供退货服务。2.服务说明:退货处理时效为商城收到退件次日起5天内。3.不符合7天无理由退货的情况:(1)“可乐优品防拆标丢失或损毁23退货商品与销售记录商品不符商品绑定账号密码未退出的;S人为原因导致的商品损坏或新增伤害，包括但不限于碎屏、机身变形、进水进液等;(5) 未经授权的拆机、维修、更换零部件、系统改动等;6)已享受过换货服务的。'
            },
            {
                qs: '商品换货服务规则?',
                desc: '1.服务期限:商品签收后的次日起7天内可申请换货，商品质量问题的可申请15天换货保障，签收时间以物流签收时间为准。申请换货后，客户应在72小时内寄出商品并回填物流单号，超出退货期限72小时未寄回将不再提供换货服务。换货处理时效为7天。2.服务说明:(1)单台销售商品不支持换货;(2)非商品质量问题换货的，每个订单商品仅限申请一次;(3)质量问题换货的，客户收到换货商品后15天内支持质量问题换货保障，但不支持无理由换货，商品保修期限不变。(4)由于二手商品的不确定性，如无法更换原商品，商城将换出近似商品，包括但不限于成色、颜色、版本的更换，商品差异导致的价格差采用多退少补的原则。7天无理由换货的可改退货，15天换货保障的不可改退货。(5) 换货处理时效为商城收到退件次日起7天内。3.不符合换货服务保障的情况:UZ34“可乐优品”防拆标丢失或损毁换货商品与销售记录商品不符，商品绑定账号密码未退出的;人为原因导致的商品损坏或新增伤害，包括但不限于碎屏、机身变形、进水进液等;(5)未经授权的拆机、维修、更换零部件、系统改动等:'
            },
            {
                qs: '商品保修服务规则?',
                desc: '1.服务期限商品签收后的次日起180天内如出现商品质量问题，可申请维修服务，签收时间以物流签收时间为准。2.服务说明:(1)享受延保服务的商品保修期限与延保服务期限一致;(2)非商品本身质量问题的，商城有权不提供维修服务，如产生维修费用将由客户承担，维修后的保修期限为30天;3)维修使用的产品零部件为原厂配件或具备原厂品质的配(4)如商品发生无法维修故障或发生多次故障导致可能存在隐性故障时，商城将根据寄回商品成色为客户更换一台相同商品。因二手商品不确定性，如无法更换相同版本机型时，商城将换出近似商品，包括但不限于成色、颜色、版本的更换，商品差异导致的价格差采用多退少补的原则。(5) 维修处理时效为商城收到退件次日起7天内。3.不符合保修服务的情况:(1)保修商品与销售记录商品不符;3商品绑定账号密码未退出的;(3)人为原因导致的商品损坏或新增伤害，包括但不限于碎屏、机身变形、进水进液等;(4)未经授权的拆机、维修、更换李部件、系统改动等;(5)商品自然老化导致的损耗问题或性能故障，如按键松动、机器进灰、屏幕老化等。'
            },
            {
                qs: '售后快递费用及运费险承保范围规则?',
                desc: '售后商品运费为谁寄谁付原则，商城不收到付件。运费险承保范围:7天无理由退换货商品经可乐优品检测判定后，质量问题产生的快递寄送费用可申请运费险出险，运费险保障标准:广东省内10元，广东省外13元，赔付方式为可乐优品商城红包。'
            },
            {
                qs: '商品配件及赠品售后规则?',
                desc: '1.客户收货时需仔细检查商品是否有破损、机身变形、进水进液等问题，商品签收《以物流信息为准)后的次日起24小时内未向商城反馈问题则视为商品无异常。2.可乐优品商城所售二手商品均贴有“可乐优品”防拆标，防拆标不影响商品使用，15日内请勿丢失或损毁防拆标，否则将不支持退换货等售后服务。超过15日可清理防拆标，不影响商品保修服务。3.因人为原因或商品老化等原因导致的商品问题不在售后范国内，如:刷机或升级系统导致的基带损坏、机身氧化、屏幕老化、按键松动、听筒或喇叭音量小等等。4.针对售后商品，商城不提供数据的导出、保存，ID登录、注销等服务，客户寄回商品前备份保存好个人数据并将商品还原至出厂状态，若有数据或账号丢失、泄漏等，商城不承担相应责任。5.商城提供的成色示例图及实拍图为购买参考使用，因为灯光、色差、分辨率等原因可能与收货商品有细微差异，最终收货商品以实物为准，如有疑义可联系商城客服协助处理。6.本服务规则最终解释权归可乐优品商城所有。'
            }
        ]
    },
])

// 问题列表
const qsOneData = ref(<Array<qses>>([]))
qsOneData.value = questionData.value[0].questions
const lidesc = ref<HTMLElement>()
const qsShow = (id: number) => {
    active1.value = id
    qsOneData.value = questionData.value[id - 1].questions

}

// 评论
const detailComments = ref(<Array<Comments>>([]))
const totalComments = ref<{
    total: number,
    pageSize: number,
    pageIndex: number
}>({
    total: 0,
    pageSize: 10,
    pageIndex: 0
})

// 买家秀
const buyShow = ref(<Array<Comments>>([]))

// 为你推荐
const detailTjData = ref(<Array<tjes>>([]))


// 为你推荐跳到顶部

const details = ref<HTMLElement>()

onMounted(async () => {

    let { data } = await getDetailProduct_c(detailId.value)

    detailData.value = data._data.info
    console.log('首次挂载', detailData.value);
    window.addEventListener("scroll", handleScrollx, true);

    let { data: data2 } = await getDeatilComments_c(1, detailId.value)
    console.log(data2);

    console.log(data2._data.proEvaluateList);
    detailComments.value = data2._data.proEvaluateList
    totalComments.value = data2._data.pageInfo
    score.value = data2._data.proEvaluateList[0]?.score

    // 买家秀数据
    let { data: data3 } = await getDeatilBuy_c(4, detailId.value, '1')
    buyShow.value = data3._data.proEvaluateList

    // 为你推荐数据
    let { data: data4 } = await getDeatiltj_c(detailId.value)
    detailTjData.value = data4._data.list

})

onBeforeRouteUpdate(async (to, from) => {
    console.log('路由即将切换');
    detailId.value = to.params.id;

    img.value = to.query.img

    let { data } = await getDetailProduct_c(detailId.value)

    detailData.value = data._data.info
    console.log('详情页跳转', detailData.value);

    // 浏览历史缓存
    let item = {
        ...detailData.value,
        readTime: Date.now()
    }
    lookPhoneHisList(item)

    let { data: data2 } = await getDeatilComments_c(1, detailId.value)
    console.log(data2);

    console.log(data2._data.proEvaluateList);
    detailComments.value = data2._data.proEvaluateList
    totalComments.value = data2._data.pageInfo
    score.value = data2._data.proEvaluateList[0]?.score

    // 买家秀数据
    let { data: data3 } = await getDeatilBuy_c(4, detailId.value, '1')
    buyShow.value = data3._data.proEvaluateList

    // 为你推荐数据
    let { data: data4 } = await getDeatiltj_c(detailId.value)
    detailTjData.value = data4._data.list

    details.value!.scrollTop = 0
})

onActivated(async () => {
    detailId.value = route.params.id as string;
    img.value = route.query.img

    let { data } = await getDetailProduct_c(detailId.value)

    detailData.value = data._data.info
    console.log('首页进入', detailData.value);

    // 浏览历史缓存
    let item = {
        ...detailData.value,
        readTime: Date.now()
    }
    lookPhoneHisList(item)

    let { data: data2 } = await getDeatilComments_c(1, detailId.value)
    console.log(data2);

    console.log(data2._data.proEvaluateList);
    detailComments.value = data2._data.proEvaluateList
    totalComments.value = data2._data.pageInfo
    score.value = data2._data.proEvaluateList[0]?.score

    // 买家秀数据
    let { data: data3 } = await getDeatilBuy_c(4, detailId.value, '1')
    buyShow.value = data3._data.proEvaluateList

    // 为你推荐数据
    let { data: data4 } = await getDeatiltj_c(detailId.value)
    detailTjData.value = data4._data.list

})

onUnmounted(() => {
    // 离开该页面需要移除这个监听的事件，不然会报错
    window.removeEventListener("scroll", handleScrollx, true);
})


// 播放视频
const videos = ref<HTMLVideoElement>()
const aaimg = ref<HTMLImageElement>()
const playVideo = () => {
    videos.value!.play()
    console.log(111);
    aaimg.value!.style.display = 'none'
}


</script>


<template>
    <div class="fixed-zbest detail" :ref="el => (details = el as HTMLDivElement)">
        <div class="head" :ref="el => (heads = el as HTMLElement)">
            <img src="https://s1.huishoubao.com/colagoods/app/img/icon-arrow-left.bac4ad56.svg" alt="" class="backs"
                @click="$router.back()">
            <div class="head-four-title" v-show="fourShow">
                <div>商品</div>
                <div>评价</div>
                <div>详情</div>
                <div>推荐</div>
            </div>
            <div class="right-icon">
                <img src="https://s1.huishoubao.com/colagoods/app/img/icon-share.c4666cbd.png" alt="" class="shares">
                <img src="https://s1.huishoubao.com/colagoods/app/img/icon-message.a85a863b.png" alt="" class="colaIcon">
            </div>
        </div>
        <van-swipe lazy-render class="banner-swiper">
            <van-swipe-item v-for="image in detailData.images" :key="image" class="banner-item">
                <img :src="image" />
            </van-swipe-item>
            <template #indicator="{ active, total }">
                <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
            </template>
        </van-swipe>
        <div class="product-info" :ref="el => (info = el as HTMLElement)">
            <div class="info-one-desc">
                <div class="info-one-top">
                    <div class="new-price">
                        <span class="size-15">￥</span>
                        <span class="size-20">{{ detailData.salesPrice / 100 }}</span>
                    </div>
                    <div class="old-price">原价￥{{ detailData.referencePrice / 100 }}</div>
                    <div class="zhekou">{{ Math.floor((detailData.salesPrice / detailData.referencePrice) * 100) / 10 }}折
                    </div>
                    <div class="sPrice">省￥{{ (detailData.referencePrice - detailData.salesPrice) / 100 }} </div>
                </div>
                <div class="info-one-bottom">
                    <div class="youxaun">
                        优选
                    </div>
                    <div class="right-name fd">
                        {{ detailData.fullName }}
                    </div>
                </div>
            </div>
            <div class="info-two-guige">
                <div class="guige-box" v-if="detailData.specInfo?.length">
                    <div class="guige-title">规格</div>
                    <div class="specInfo-item" v-for="g in detailData.specInfo" :key="g.key">
                        <img :src="g.ico" alt="" class="specInfo-ico">
                        <div class="specInfo-name">{{ g.name }}</div>
                        <div class="specInfo-value">{{ g.value }}</div>
                    </div>
                    <div>
                        <van-icon name="arrow" size="18" />
                    </div>
                </div>
                <img src="https://s1.huishoubao.com/colagoods/app/img/bgservice_hsb.fc86d5cd.png" alt="" class="serve-bg">
            </div>
        </div>
        <div class="product-info-desc">
            <div class="new-chense">
                <div>
                    <span class="chense-value">95新</span>
                    <span class="chense-desc">轻微划痕 用户首选</span>
                </div>
                <div class="look-chense">查看传成色说明</div>
            </div>
            <div class="change-phone">
                <div class="change-left-box">
                    <img src="https://s1.huishoubao.com/colagoods/app/img/icon-huishou.4fad5f9e.svg" alt="" class="hs-ico">
                    <span class="chense-desc">以旧换新,最低0元购</span>
                </div>
                <div class="like-hs">立即回收</div>
            </div>
            <div class="user-appraise">
                <div class="user-head">
                    <div>用户评价({{ totalComments.total }})</div>
                    <div v-if="totalComments.total != 0">
                        <span>查看全部</span>
                        <van-icon name="arrow" size="18" />
                    </div>
                    <div v-else>
                        <span>暂无评价</span>
                    </div>
                </div>
                <div class="user-appraise-info" v-if="totalComments.total != 0">
                    <div class="info-head">
                        <img src="https://s1.huishoubao.com/colagoods/app/img/icon-avatar.7af1885e.svg" alt=""
                            class="user-img">
                        <div class="user-name">{{ detailComments[0]?.nickName }}</div>
                        <van-rate v-model="score" readonly :size="12" allow-half class="user-score" gutter="2" />
                    </div>
                    <div class="user-desc">
                        {{ detailComments[0]?.describe }}
                    </div>
                </div>
            </div>
            <div class="buy-show" v-if="totalComments.total != 0">
                <div class="user-head">
                    <div>买家秀</div>
                    <div>
                        <span>查看全部</span>
                        <van-icon name="arrow" size="18" />
                    </div>
                </div>
                <div class="buy-imgs">
                    <img :src="b?.pics" alt="" v-for="b in buyShow" class="buy-img">
                </div>
            </div>
            <div class="serve-baoz">
                <img src="https://s1.huishoubao.com/colagoods/app/img/detail_01.e3f56520.png" alt="">
            </div>
            <div class="desc-video">
                <img src="https://s1.huishoubao.com/colagoods/app/img/poster-video.26aadb4e.png" alt="" class="po-viseo"
                    @click="playVideo" :ref="el => (aaimg = el as HTMLImageElement)">
                <video src="https://s1-1251010403.file.myqcloud.com/youpin/mall/video/colagoods_ad_01.mp4" controls
                    :ref="el => (videos = el as HTMLVideoElement)"></video>
            </div>
            <div class="show-img">
                <img :src="`https://s1.huishoubao.com/colagoods/app/img/goodsdesc-detail-iphone.png`" alt="">
                <img :src="d" alt="" v-for="d in detailData.detailPic">
            </div>
            <div class="wrap-fittings">
                <img src="https://s1.huishoubao.com/colagoods/app/img/detail_baozhuang.b436556e.png" alt="">
            </div>
            <div class="mal-question">
                <img src="https://s1.huishoubao.com/colagoods/app/img/detail_question.7d9072bd.png" alt="">
                <div class="qs-list" :ref="el => (lidesc = el as HTMLElement)">
                    <div class="qs-item" v-for="q in questionData" :key="q.id" @click="qsShow(q.id)">
                        <img :src="q.id != active1 ? q.icon : q.seIcon" alt="" class="qs-icon">
                        <div class="qs-text" :class="{ active: active1 == q?.id }">{{ q.text }}</div>
                    </div>
                </div>
            </div>
            <div class="qs-desc">
                <van-collapse v-model="activeNames">
                    <van-collapse-item :title="val.qs" :name="index + 1" v-for="(val, index) in qsOneData" class="hhh">
                        {{ val.desc }}
                    </van-collapse-item>
                </van-collapse>
            </div>
            <div class="tuijian">
                <div class="tj-head">
                    <span>为你推荐</span>
                    <div>更多推荐 ></div>
                </div>
                <div class="tj-list">
                    <div class="tj-item" v-for="item in detailTjData" :key="item.id"
                        @click.stop="$router.replace(`/detail/${item.id}?img=${item.image}`)">
                        <img :src="item.image" alt="" class="tj-img">
                        <div class="tj-title">{{ item.fullName }}</div>
                        <div class="tj-price">
                            <span class="tj-new-price">￥{{ item.salesPriceYuan }}</span>
                            <span class="tj-old-price">￥{{ item.referencePriceYuan }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-action-bar class="p-zindex">
            <van-action-bar-icon icon="https://s1.huishoubao.com/colagoods/app/img/icon-kf.13bd10b8.png" text="客服"
                color="#ee0a24" />
            <van-action-bar-icon icon="https://s1.huishoubao.com/colagoods/app/img/icon-carts.2e7ff30d.svg" text="购物车"
                :badge="badge > 0 ? badge : ''" @click.stop="goToCartFun(badge)" />
            <van-action-bar-icon icon="like" :text="collectShow ? '已收藏' : '收藏'" :color="collectShow ? '#ff5000' : '#ccc'"
                @click.stop="collectFun()" />
            <van-action-bar-button type="warning" text="加入购物车" @click.stop="addCartFun()" />
            <van-action-bar-button type="danger" text="立即购买" @click.stop="payFun()" />
        </van-action-bar>
    </div>
</template>

<style lang="scss" scoped>
.detail {
    background-color: #fff;
    overflow: scroll;
    padding-bottom: .5rem;

    .head {
        width: 100%;
        padding: .08rem;
        height: .46rem;
        box-sizing: border-box;
        position: fixed;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 10;

        img {
            width: .33rem;
            height: .33rem;
        }

        .head-four-title {
            display: flex;
            margin-left: .15rem;

            >div {
                margin-right: .15rem;
            }
        }

        .backs {
            width: .25rem;
            height: .25rem;
        }

        .right-icon {
            display: flex;

            .shares {
                margin-right: .08rem;
            }
        }
    }

    .banner-item {
        width: 100%;
        height: 3.8rem;
    }

    .custom-indicator {
        position: absolute;
        right: .1rem;
        bottom: .15rem;
        padding: .02rem .05rem;
        font-size: .12rem;
        background: rgba(0, 0, 0, 0.1);

    }

    .product-info {
        padding: 0 .1rem;

        .info-one-desc {
            width: 3.55rem;
            height: .9rem;
            padding-top: .16rem;
            box-sizing: border-box;
            border-bottom: .01rem solid #f2f2f2;
        }
    }

    .info-one-top {
        display: flex;
        height: .22rem;
        align-items: flex-end;

        .new-price {
            color: #e0253c;
            font-style: italic;
            font-weight: 900;

            .size-15 {
                font-size: .15rem;
            }

            .size-20 {
                font-size: .20rem;
            }
        }

        .old-price {
            font-size: .13rem;
            color: #ccc;
            text-decoration: line-through;
            margin-left: .06rem;
            margin-right: .03rem;
        }

        .zhekou,
        .sPrice {
            height: .14rem;
            font-size: .13rem;
            line-height: .13rem;
            padding: 0 .02rem;
            border: .01rem solid var(--home-red);
            color: var(--home-red);
            border-radius: .03rem;
            margin-left: .05rem;
        }




    }

    .info-one-bottom {
        margin-top: .15rem;
        display: flex;
        align-items: flex-end;

        .youxaun {
            padding: .01rem .03rem;
            background-color: red;
            color: #fff;
            font-size: .14rem;
            margin-right: .07rem;
        }

        .right-name {
            width: 3rem;
            font-size: .17rem;
            font-weight: bold;
        }
    }

    .info-two-guige {
        width: 3.55rem;
        height: 1.2rem;
        padding-top: .1rem;

        .guige-box {
            display: flex;
            height: .6rem;
            align-items: center;
            justify-content: space-between;

            .guige-title {
                font-size: .15rem;
                font-weight: 600;
                color: #000;

            }


        }

        .specInfo-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;


            .specInfo-ico {
                width: .18rem;
                display: block;
            }

            .specInfo-name {
                font-size: .13rem;
                color: #444;
                margin-top: .03rem;
            }

            .specInfo-value {
                font-size: .12rem;
                color: #666;
            }

        }

        .serve-bg {
            width: 100%;
            height: .36rem;
            margin-top: .05rem;
        }

    }

    .product-info-desc {
        width: 100%;
        box-sizing: border-box;
        padding: .1rem;
        background-color: #f6f7fa;

        .new-chense,
        .change-phone {
            padding: 0 .08rem;
            width: 3.55rem;
            height: .46rem;
            box-sizing: border-box;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: .14rem;
            margin-bottom: .05rem;


            .chense-value {
                font-weight: 800;
                color: red;
                margin-right: .1rem;
            }

            .look-chense {
                padding-left: .08rem;
                border-left: .01rem solid #ccc;
                color: #173ff1;
            }

            .like-hs {
                width: .7rem;
                height: .25rem;
                line-height: .25rem;
                text-align: center;
                border: .01rem solid red;
                color: var(--home-red);
                border-radius: .05rem;
            }
        }

        .change-left-box {
            display: flex;
            align-items: center;

            .hs-ico {
                width: .26rem;
                display: block;
                margin-right: .15rem;
            }
        }

        .user-appraise {
            width: 3.55rem;
            // height: 1rem;
            padding: .1rem .08rem;
            box-sizing: border-box;
            background-color: #fff;
            border-bottom: .01rem solid #ddd;

            .user-head {
                display: flex;
                justify-content: space-between;
                color: #aaa;
                font-size: .14rem;
            }

            .user-appraise-info {
                margin-top: .1rem;
            }

            .user-head {
                display: flex;
            }


        }

        .info-head {
            display: flex;
            align-items: center;

            .user-img {
                width: .23rem;
                height: .23rem;
                margin-right: .03rem;
            }

            .user-name {
                font-size: .13rem;
                color: #333;
                margin-right: .1rem;
            }
        }

        .user-desc {
            margin-top: .05rem;
            font-size: .13rem;
        }

        .buy-show {
            width: 3.55rem;
            padding: .1rem .08rem;
            background-color: #fff;
            box-sizing: border-box;
            padding-bottom: .12rem;

            .user-head {
                display: flex;
                justify-content: space-between;
                color: #aaa;
                font-size: .14rem;
            }

            .buy-imgs {
                margin-top: .1rem;
                display: flex;

                .buy-img {
                    width: .84rem;
                    height: .81rem;
                    margin-right: .03rem;
                    border-radius: .05rem;
                }
            }
        }

        .serve-baoz {
            margin-top: .12rem;
        }

        .desc-video {
            margin-top: .12rem;
            position: relative;

            .po-viseo {
                position: absolute;
                top: 0;
                right: 0;
                z-index: 2;
            }
        }

        .show-img {
            margin-top: .12rem;
        }

        .wrap-fittings {
            margin-top: .12rem;
        }

        .mal-question {
            margin-top: .12rem;

            .qs-icon {
                width: .28rem;
            }
        }

        .qs-list {
            display: flex;
            justify-content: space-around;
            background-color: #fff;

            .qs-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-bottom: .15rem;
            }

            .qs-text {
                font-size: .14rem;
            }

            .qs-text.active {
                color: red;
                position: relative;

                &::after {
                    content: '';
                    width: .22rem;
                    height: .03rem;
                    background-color: red;
                    position: absolute;
                    bottom: -0.08rem;
                    left: 30%;
                }
            }
        }

        .qs-desc {
            width: 3.55rem;
            background-color: #f6f7fa;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            margin-top: .12rem;

            .hhh {
                background-color: #fff;
                color: #000;
                font-weight: bold;
                margin-top: .08rem;
            }
        }

        .tuijian {
            margin-top: .12rem;
            width: 3.55rem;
            background-color: #fff;
            padding: .1rem;
            box-sizing: border-box;
            padding-bottom: .4rem;


        }

        .tj-head {
            display: flex;
            justify-content: space-between;
            font-size: .13rem;
            color: #333;

            span {
                font-size: .14rem;
            }
        }

        .tj-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: .12rem;


            .tj-item {
                width: .96rem;
                height: 1.5rem;
            }

            .tj-img {
                width: .74rem;
                height: .83rem;
                display: block;
            }

            .tj-title {
                font-size: .12rem;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .tj-price {
                margin-top: .05rem;
                display: flex;
                align-items: center;
            }

            .tj-new-price {
                color: red;
                font-size: .13rem;
                font-weight: 800;
                font-style: italic;
            }

            .tj-old-price {
                font-size: .12rem;
                text-decoration: line-through;
                color: #aaa;
                margin-left: .08rem;
            }
        }


    }

    .p-zindex {
        z-index: 4;
    }


}
</style>
